"use client";
import React, { useCallback, useEffect, useState } from "react";
import "./news.css";
import classNames from "classnames";
import { Image, Table, Pagination } from "antd";
import { getNewsList } from "@/app/api";
import { useRouter } from "next/navigation";
export default function News({ params }:{params:{id:string}}) {
  const [selected, setSelected] = useState("31");
  const [areaTitle, setAreaTitle] = useState("集团新闻");
  const [newsList, setNewsList] = useState([]);
  const [total, setTotal] = useState(0);
  const [pageNum, setPageNum] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const router = useRouter();
  let temp = "";
  const dataChange = useCallback((pageNum:number, pageSize:number) => {
    setPageNum(pageNum);
    setPageSize(pageSize);
    getNewsList(pageNum, pageSize, temp).then((res) => {
      setNewsList(res.data.list);
      setTotal(res.data.total);
    });
  }, []);
  const changePage = useCallback((type: string) => {
    setPageNum(1)
    setPageSize(10)
    setSelected(type)
    switch (type) {
      case "31":
        setAreaTitle("集团新闻");
        temp = "01";
        break;
      case "32":
        setAreaTitle("集团动态");
        temp = "03";
        break;
      case "33":
        setAreaTitle("集团公告");
        temp = "02";
        break;
    }
    getNewsList(pageNum, pageSize, temp).then((res) => {
      setNewsList(res.data.list);
      setTotal(res.data.total);
    });
  }, []);
  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      ellipsis: true,
      width: "88%",
    },
    {
      title: "日期",
      dataIndex: "createTime",
      key: "createTime",
      width: "12%",
    },
  ];

  useEffect(() => {
    setSelected(params.id);
    changePage(params.id);
  }, []);

  return (
    <div className="content">
      <div className="news_header">
        <div className="header_title">新闻中心</div>
        <div className="header_sub">News Center</div>
      </div>
      <div className="content_area">
        <div className="navigation_left">
          <div className="header_center">
            <Image
              src="/assets/header/sub/xwzx.svg"
              width={"100%"}
              alt=""
              preview={false}
            ></Image>
          </div>
          <div
            className={classNames(
              selected === "31"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => {
              changePage("31");
            }}
          >
            集团新闻
          </div>
          <div
            className={classNames(
              selected === "32"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => {
              changePage("32");
            }}
          >
            集团动态
          </div>
          <div
            className={classNames(
              selected === "33"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => {
              changePage("33");
            }}
          >
            集团公告
          </div>
        </div>
        <div className="table_area">
          <div className="area_header">
            <div className="area_title">{areaTitle}</div>
          </div>
          <Table
            dataSource={newsList}
            rowKey={(record:any) => record.id}
            showHeader={false}
            columns={columns}
            pagination={false}
            onRow={(record) => {
              return {
                onClick: () => {
                  router.push(`/dashboard/news/info/${record.id}`)
                },
              };
            }}
          />
          <Pagination
            className="mt-[1%] mb-[1%]"
            defaultCurrent={1}
            defaultPageSize={10}
            current={pageNum}
            pageSize={pageSize}
            pageSizeOptions={[10, 20, 30, 40, 50]}
            showSizeChanger
            total={total}
            onChange={dataChange}
            showTotal={(total,range)=>   `第${range[0]}-${range[1]}条 共${total}条`}
          />
        </div>
      </div>
    </div>
  );
}
